<template>
	<view class="page">
    <fleet-f-toast ref='f_toast'/>
    <!--      按专家-->
<!--    <view class="dept-list">-->
<!--      <view class="dept">-->
<!--        <view class="left">-->
<!--          <view class="title">{{lastPageInfo.deptName}}</view>-->
<!--          <view>{{lastPageInfo.docName}} ({{lastPageInfo.title}})</view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--    医生信息+背景图-->
    <view class="header">
      <view class="headerLeft">
        <image :src="currObj.yszpwjm" class="headPortrait" v-if="currObj.yszpwjm"></image>
        <image src="https://ayh.yhfhyy.com.cn/img/defaulthead.png" class="headPortrait" v-else></image>
      </view>
      <view class="headerRight">
        <view class="ksName">{{lastPageInfo.docName}}</view>
        <view class="sub-title">
          <view class="type">{{lastPageInfo.deptName}}</view>
          <view class="type" v-if="getZCAndSC('zc')">({{getZCAndSC('zc')}})</view>
        </view>
      </view>
    </view>
    <!--      医生简介和擅长-->
    <view class="goodat" v-if="getZCAndSC('goodat')">
      <view class="title">
        医生简介和擅长
      </view>
      <view class="content" v-html="getZCAndSC('goodat')"></view>
    </view>


    <view class="blank"></view>
    <view class="part-2">
      <view class="content" v-for="(item, index) in orderDataList" :key="index" @click="toDetail(item)">
        <view class="left">
          <view class="title">
            <view>{{item.scheduleDate}} {{item.weekName}} {{getTxt(item.ampm)}}</view>
            <view>(总号源{{item.totalNum}}, 余号{{item.residueNum}})</view>
          </view>
          <view class="price">{{item.bookFee/100}}元</view>
        </view>
        <view class="right">
          预约 &gt;
        </view>
      </view>
    </view>
    <view class="blank"></view>
<!--    <view class="desc" v-if="pageInfo.description">-->
<!--      {{pageInfo.description}}-->
<!--    </view>-->

    <!--      号源明细-->
    <uni-popup ref="popup" type="bottom" class="my-popup" background-color="#fff">
      <view class="popup-title">
        <view class="title">
          <text>{{docInfo.scheduleDate}}</text>
          <text>{{docInfo.weekName}}</text>
          <text>{{getTxt(docInfo.ampm)}}</text>
        </view>
        <view class="title">(总号源{{docInfo.totalNum}}, 余号{{docInfo.residueNum}})</view>
        <view class="desc">根据患者预约挂号的先后顺序依次就诊</view>
      </view>
      <view class="popup-content">
        <view class="item" v-for="(item, index) in detailList" :key="index" @click="toConfirm(item)">
          <text>{{item.numNo}}号</text>
          <text>{{item.numDate}}</text>
          <text>{{item.numTime}}</text>
          <text>{{item.weekName}} ({{getTxt(item.ampm)}})</text>
        </view>

      </view>
    </uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
        orderDataList:[],
        detailList: [],//号源明细
        deptId: '',
        docId: '',
        docInfo: {},
        lastPageInfo: {},
        platformDocId: ''//平台医生id
			};
		},
    onLoad(option) {
      console.log(`=====onLoad(option)========>`,option)
      let _this = this;
      this.deptId = option.deptId
      this.docId = option.docId
      //2024.03.15
      this.platformDocId = option.platformDocId
      if(option.platformDocId){
        //调用接口获取医生信息
        console.log(`=====调用接口获取医生信息===获取参数=====>`, this.deptId, this.docId, this.$store.state.regDocDetail)
        let json = {};
        json.service = 'smarthos.user.doc.card.get';
        json.docId = _this.platformDocId;
        json.token=uni.getStorageSync('token');
        _this.request.default.urlRequest(json, 'POST', function(res) {
          if (res.data.code == '0') {
            let docInfo = {
              deptName: res.data.obj.doc.deptName,
              docName: res.data.obj.doc.docName,
              docAvatar: res.data.obj.doc.docAvatar,
              description: res.data.obj.doc.docResume,
              docSkill: res.data.obj.doc.docSkill,
              title: res.data.obj.doc.docTitle,
              docId: res.data.obj.doc.id
            }
            _this.lastPageInfo = docInfo
          }
        })
      }else{
        //沿用上页面传过来的数据
        console.log(`========获取参数=====>`, this.deptId, this.docId, this.$store.state.regDocDetail)
        this.lastPageInfo = this.$store.state.regDocDetail
      }

      this.getScheduleList()
    },
    methods:{
      /**
       * 格式化标题
       * @param item
       */
      getZCAndSC(flag) {
        if (!this.lastPageInfo) return ''

        if (flag === 'zc') {
          return this.lastPageInfo.title || ""
        } else if (flag === 'goodat') {//擅长
          return ((this.lastPageInfo.description || '') + '<br/><br/>' + (this.lastPageInfo.docSkill || ''))
        } else if (flag === 'avatar') {//头像
          return this.lastPageInfo.docAvatar
        }
      },
      getTxt(txt){
        let tx='全天'
        if(txt==1){
          tx='上午'
        }
        if(txt==2){
          tx='下午'
        }
        return tx
      },
      /**
       * 拉取底部弹窗选号源
       * @param item
       */
      toDetail(item){
        console.log(`=====item=======>`,item)
        this.docInfo=item
        this.getScheDetail(item)
      },

      /**
       * 获取医生排班
       */
      getScheduleList() {
        let _this = this;
        let json = {};
        json.type = uni.getStorageSync('guahao_flag')
        json.deptId = this.deptId
        json.docId = this.docId
        json.service = 'smarthos.baicaoyuan.gh.doc.schedule.list'
        _this.request.default.urlRequest(json, 'POST', (res) => {
          if (res.data.code == '0') {
            this.orderDataList = res.data.list || []
          } else {
            _this.$refs['f_toast'].showToast({
              title: res.data.msg
            });
          }
        });
      },

      /**
       * 拉取排班明细
       * 2023.09.13
       */
      getScheDetail(item) {
        let _this = this;
        let json = {};
        json.scheduleId = item.scheduleId
        json.service = 'smarthos.baicaoyuan.gh.doc.schedule.num.detail.list'
        console.log(`=====请求参数========>`,json)
        _this.request.default.urlRequest(json, 'POST', (res) => {
          if (res.data.code == '0') {
            this.detailList = res.data.list || []
            //号源弹窗
            this.$refs.popup.open('bottom')
          } else {
            _this.$refs['f_toast'].showToast({
              title: res.data.msg
            });
          }
        });
      },

      toConfirm(item) {
        this.$refs.popup.close()
        // 收集信息后保持,跳转
        let confirmPayInfo = {
          item,//号源信息
          docInfo: this.docInfo,
        }
        uni.setStorageSync('confirmPayInfo', confirmPayInfo)
        uni.navigateTo({
          url: '/pagesIndex/registered/MedicalInfoConfirm'
        })
      }

    }
	}
</script>

<style lang="scss">
page,
html,
body {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.header {
  width: 100%;
  height: 215px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  background-image: url("https://ayh.yhfhyy.com.cn/img/docbg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;

  .headerLeft {
    width: 176 upx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;

    > image {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      border: 2px solid #fff;
    }
  }

  .headerRight {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .ksName {
      font-size: 40 upx;
      color: #1e1e1e;
      font-weight: bold;
    }

    .sub-title {
      display: flex;
      padding: 4px 0;
      color: #1e1e1e;

      .type {
        font-size: 28 upx;
        color: #4d4e52;
        margin-right: 10px;
      }
    }
  }
}

.goodat{
  padding: 15px;
  background: #fff;
  height: 100px;
  overflow-y: auto;

  .title{
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
  .content{
    font-size: 14px;
    color: #666;
    line-height: 25px;
    padding: 10px 0;
  }
}

.part-2{
  background-color: #ffffff;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}
.content{
  padding: 15px;
  font-size: 14px;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
      line-height: 25px;
    }
    .price{
      padding: 15px;
      color: $uni-color-primary;
    }
  }
  .right {
    color: $uni-color-primary;
    > view {
      border: 1px solid;
      border-radius: 20px;
      padding: 4px 12px;
      background-color: $uni-color-primary;
      color: #ffffff;
      font-size: 12px;
    }
  }
}

.desc{
  padding: 15px;
  font-size: 14px;
  color: #666666;
  background-color: #ffffff;
}

//医生排班列表
.my-popup{
  .popup-title{
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;

    .title{
      padding: 5px 10px;
      text-align: center;
      font-size: 16px;
      color: #111111;
      >text{
        padding: 5px;
      }
    }
    .desc{
      padding: 5px 10px;
      text-align: center;
      font-size: 12px;
      color: #999999;
    }
  }

  .popup-content{
    height: 300px;
    overflow-y: auto;
    margin: 0 15px;

    .item{
      padding: 15px 6px;
      text-align: center;
      font-size: 14px;
      color: #666666;
      border-bottom: 1px solid #f2f2f2;

      >text{
        padding: 10px;
      }
    }
  }
}

//todo
</style>
